<template>
  <div class="abc" v-if="visible">
    <div @click="fn">{{msg1}}</div>
    <h1 @click="changeParentAltMsg">{{$attrs.a}}</h1>
    <!--<h1 @click="changeVisible">{{$attrs.a}}</h1>-->
    <slot name="slota"></slot>
    <button @click="sendMsgByBus">sendMsg</button>
    <!--<div>我能接收到来自父组件的数据——————{{val}}</div>-->
  </div>
</template>

<script>
/* eslint-disable no-console */

// import zizujian2 from './zizujian2';
import { bus } from '../bus';

export default {
  name: 'zizujian1',
  data() {
    return {
      msg1: '我是子组件111',
    };
  },
  // components: {
  //   zizujian2,
  // },
  methods: {
    fn() {
      // console.log(this.$attrs.a);
      console.log(this.$slots);
    },
    changeVisible() {
      // this.$emit('update:visible',false);
      this.$emit('updateVisible', false);
    },
    sendMsgByBus() {
      bus.$emit('a1', '我是A1');
    },
    changeParentAltMsg() {
      this.$parent.altMsg = 'hhahhahahaahahah';
      // this.$emit('test','abcd');
      // $emit()  是主动触发事件的方法
      // 第一个参数是 触发的事件名
      // 第二个参数是 事件触发时执行的函数传递实际参数
      // $emit() 是绑定在VUE原型上的
      // vue原型上的方法或者属性都会在前面加上$ 以便识别它是vue自带的方法  这是规范
    },
  },
  mounted() {
    console.log(this.$slots.slotA);
  },
  props: ['val', 'visible'],
};
</script>

<style scoped>
.abc{
  color: red;
  background: antiquewhite;
  line-height: 100px;
}
</style>
